<template>
  <ContentWrap>
    <!-- <div class="text-20px font-700 mb-20px">权限列表</div> -->
    <div class="routeHeader">
      <el-button :disabled="formLoading" type="primary" @click="filingData">保存</el-button>
      <el-button @click="goBack">关闭</el-button>
    </div>
    <!-- 搜索栏 -->
    <el-form
      ref="queryFormRef"
      :inline="true"
      :model="queryParams"
      class="-mb-15px"
      label-width="110px"
    >
      <el-form-item label="角色名称" prop="name">
        <el-input
          v-model="queryParams.name"
          class="!w-220px"
          clearable
          placeholder="请输入角色名称"
        />
      </el-form-item>
      <el-form-item label="权限字符" prop="componentName">
        <el-input
          v-model="queryParams.componentName"
          class="!w-220px"
          clearable
          placeholder="请输入权限字符"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery" type="primary"> 搜索 </el-button>
        <el-button @click="resetQuery"> 重置 </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
  <ContentWrap>
    <div style="width: 100%; height: 50px; display: flex; justify-content: space-between">
      <el-button type="primary" @click="addClick">新增</el-button>
    </div>
    <el-table border v-loading="loading" :data="list" :height="tableHeight">
      <el-table-column align="center" label="一级功能模块" prop="name1" />
      <el-table-column align="center" label="二级功能模块" prop="name2" />
      <el-table-column align="center" label="三级级功能模块" prop="name3" />
      <el-table-column align="center" label="表头字段" prop="name" />
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button
            :disabled="formLoading"
            link
            type="danger"
            size="small"
            @click="deleteClick(scope.row)"
            >移除行</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-table v-loading="loading" :data="list" :default-expand-all="isExpandAll">
        <el-table-column :show-overflow-tooltip="true" label="一级功能模块" width="300px">
          <template #default="scope">
            <div> {{ scope.row.name }}</div>
          </template>
        </el-table-column>

        <el-table-column :show-overflow-tooltip="true">
          <template #default="scope">
            <el-table :data="scope.row.children">
              <el-table-column
                label="二级功能模块"
                width="300px"
                v-if="scope.row.children != undefined"
              >
                <template #default="scope"> {{ scope.row.name }}</template>
              </el-table-column>
              <el-table-column v-if="scope.row.children != undefined">
                <template #default="scope">
                  <el-table :data="scope.row.children">
                    <el-table-column label="三级功能模块">
                      <template #default="scope">
                        <div class="pt-8px pt-8px">{{ scope.row.name }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column label="表头字段" prop="cName" />
                    <el-table-column label="状态">
                      <template #default="scope">
                        <el-switch
                          v-model="scope.row.status"
                          @change="switchChange"
                          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        />
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
      </el-table> -->
  </ContentWrap>
  <!-- 新增列表权限 -->
  <AddedList ref="AddedListRef" @success="getList" />
</template>
<script lang="ts" setup>
const message = useMessage() // 消息弹窗
import AddedList from './AddedList.vue'
import * as MenuApi from '@/api/system/menu'
import { useTagsViewStore } from '@/store/modules/tagsView'

// const tabulation = ref(false)
const loading = ref(true) // 列表的加载中
const list = ref<any>([]) // 列表的数据
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const roleId = ref()
const listData = ref() // 保存数据
const queryFormRef = ref() // 搜索的表单
const queryParams = ref({
  roleId: undefined,
  name: undefined,
  componentName: undefined
})
const { query } = useRoute() // 路由的查询

/** 查询列表 */
const getList = async () => {
  queryParams.value.roleId = (query as any).id
  loading.value = true
  try {
    const data = await MenuApi.listPurview(queryParams.value)
    list.value = data
    let result = data.map((item) => {
      if (item.type == 4) {
        return item.id
      }
    })
    listData.value = result.toString()
  } finally {
    loading.value = false
  }
}

// 新增
const AddedListRef = ref()
const addClick = () => {
  let id = roleId.value
  AddedListRef.value.open(id)
}
// 删除
const deleteClick = async (val) => {
  formLoading.value = true
  try {
    const data = {
      roleId: roleId.value,
      menuIds: val.id
    }
    await message.confirm('确定删除该项吗')
    loading.value = true
    await MenuApi.deleteList(data)
    message.success('删除成功')
    await getList()
  } finally {
    loading.value = false
    formLoading.value = false
  }
}
/** 搜索按钮操作 */
const handleQuery = () => {
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}
// 保存
const filingData = async () => {
  loading.value = true
  formLoading.value = true
  try {
    const data = {
      roleId: roleId.value,
      menuIds: listData.value
    }
    await MenuApi.addList(data)
    message.success('保存成功')
    // 发送操作成功的事件
    goBack()
  } finally {
    loading.value = false
    formLoading.value = false
  }
}

const tagsViewStore = useTagsViewStore()
const route = useRouter() // 路由
const goBack = async () => {
  //获取当前路由并删除tagView
  tagsViewStore.delView(route.currentRoute.value)
  //跳转列表页
  route.push({
    path: '/system/system/role'
  })
}

/** 初始化 **/
const tableHeight = ref(0)
onMounted(async () => {
  const queryParamsHeight = queryFormRef.value.$el.clientHeight + 2
  tableHeight.value = document.body.clientHeight - 132 - queryParamsHeight - 127
  getList()
})
</script>
<style lang="scss" scoped></style>
